<template>
    <div>
        <h1>当前的和为：{{ sum }}</h1>
        <button @click="changSum">点我+1</button>
    </div>
</template>

<!-- 子组件 -->
<script setup lang="ts" name="Person">
    import {
        ref,
        onBeforeMount,  //挂载前的钩子函数
        onMounted,  //挂载后的钩子函数
        onBeforeUpdate, //修改前的钩子函数
        onUpdated,  //修改后的钩子函数
        onBeforeUnmount,    //销毁前的钩子函数
        onUnmounted //销毁后的钩子函数
    } from 'vue'

    let sum=ref(0);

    function changSum(){
        sum.value+=1;
    }
    onMounted(()=>{
        console.log("挂载之后.....");
    })
    onBeforeUpdate(()=>{
        console.log("修改之前.....");
    })
    onUpdated(()=>{
        console.log("修改之后.....");
    })
    onBeforeUnmount(()=>{
        console.log("销毁之前.....");
    })
    onUnmounted(()=>{
        console.log("销毁之后.....");
    })

    //声明周期钩子函数
    onBeforeMount(()=>{
        console.log("挂载之前.....");
    })
    console.log('setup......');

</script>


<style scoped>

</style>
